<template>
  <div class="button-design-container">
    <el-row class="button-cow-col">
      <el-col :span="5" class="button-cow-col">
        <div class="button-list">
          <draggable
            v-model="info.buttonList"
            :options="{name: 'buttonList',
             handle: '.button-list-item',
             draggable:'.button-list-item',
             chosenClass: 'sortable-chosen',
             dragClass: 'sortable-drag',
             animation: 300}">
            <template v-for="(button, index) in info.buttonList">
              <div class="button-list-item"
                   @click="currentIndex = index"
                   :key="index"
                   @dblclick="buttonClick(index)"
                   :class="{'sortable-choose': currentIndex === index}">
                <el-tooltip
                  :disabled="!button.tooltip"
                  :effect="button.effect"
                  :content="button.tooltip"
                  placement="top-start">
                  <el-button
                    :type="button.type"
                    :round="button.round"
                    :plain="button.plain"
                    :circle="button.circle">
                    <span v-if="button.isShowName">
                      {{ button.name }}
                    </span>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </draggable>
          <div class="add-button">
            <el-button
              plain
              type="primary"
              @click="addButton"
              icon="el-icon-plus">
              添加按钮
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col
        :span="19"
        class="button-cow-col button-info">
        <el-form
          ref="buttonForm"
          :model="form"
          :rules="rules"
          label-position="top">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="name" label="按钮名称">
                <el-input @input="inputName" style="width: 100%;" placeholder="请输入按钮名称" v-model="form.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isShowName" label="是否显示按钮名称">
                <el-radio-group v-model="form.isShowName">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="icon" label="按钮图标">
                <el-popover placement="right" popper-class="icon-selector-popper" trigger="hover" width="690">
                  <template #reference>
                    <el-button style="width: 100%;">
                      图标选择器
                      <i class="arrow-down-s-line"/>
                    </el-button>
                  </template>
                  <icon-select @handle-icon="handleIcon"/>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="effect" label="描述信息主题">
                <el-radio-group v-model="form.effect">
                  <el-radio label="dark">深色</el-radio>
                  <el-radio label="light">亮色</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="permissions" label="按钮权限">
                <el-input style="width: 100%;" placeholder="按钮权限" v-model="form.permissions"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="position" label="按钮位置">
                <el-radio-group v-model="form.position">
                  <el-radio label="header">表格上方</el-radio>
                  <el-radio label="content">表格操作</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="type" label="按扭类型">
                <el-select style="width: 100%;" v-model="form.type" placeholder="请选择按钮类型">
                  <el-option label="默认按钮" value="default"></el-option>
                  <el-option label="主要按钮" value="primary"></el-option>
                  <el-option label="成功按钮" value="success"></el-option>
                  <el-option label="信息按钮" value="info"></el-option>
                  <el-option label="警告按钮" value="warning"></el-option>
                  <el-option label="危险按钮" value="danger"></el-option>
                  <el-option label="文本按钮" value="text"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="plain" label="是否设置为朴素按钮">
                <el-radio-group v-model="form.plain">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="tooltip" label="描述信息">
                <el-input placeholder="请输入按钮描述信息" v-model="form.tooltip"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="round" label="是否设置为圆角按钮">
                <el-radio-group v-model="form.round">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="circle" label="是否设置为圆形按钮">
                <el-radio-group v-model="form.circle">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import {getLogotypeByString} from "@/utils/h5ve";
import IconSelect from "@/components/IconSelect";

export default {
  name: "ButtonDesign",
  components: {
    draggable,
    IconSelect
  },
  props: {
    info: {
      type: Object,
      default() {
        return {
          buttonList: [],
        }
      }
    }
  },
  computed: {
    form() {
      return this.info.buttonList[this.currentIndex];
    }
  },
  data() {
    return {
      currentIndex: 0,
      rules: {
        permissions: [
          {required: true, message: "按钮权限不能为空", trigger: "blur"}
        ],
      }
    }
  },
  methods: {
    // 选择图标
    handleIcon(name) {
      this.form.icon = name;
    },
    inputName(data) {
      this.form.permissions = getLogotypeByString(data);
    },
    addButton() {
      const button = {
        name: "按钮",
        isShowName: 1,
        tooltip: "",
        effect: "dark",
        plain: true,
        round: false,
        circle: false,
        position: "header",
        type: "primary",
        icon: "el-icon-house",
        permissions: "an"
      }
      this.info.buttonList.push(button);
    },
    buttonClick(index) {
      this.info.buttonList.splice(index, 1);
    }
  }
}
</script>

<style scoped lang="scss">
.button-design-container {
  height: calc(100vh - 45px);

  .button-cow-col {
    height: 100%;
    position: relative;
    border-right: 1px solid #efefef;

    .button-list {
      height: calc(100% - 50px);
      overflow-y: auto;

      .button-list-item {
        text-align: center;
        padding: 10px 0;
        margin: 5px;
      }

      .sortable-drag {
        background-color: #4092ff !important;
      }

      .sortable-choose,
      .sortable-chosen {
        background-color: #e8f4ff !important;
        border-left: 3px solid #1890ff;
      }

      .add-button {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #fff;
        border-top: 1px solid #f0f0f0;
      }
    }

    .button-info {
      padding: 30px 10% 0 10%;
    }
  }
}

::v-deep .el-form-item__label {
  padding: 0;
}
</style>
